import React from "react";
import { Button, Flex, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import logo from '../../../../images/logo192.png'
import './index.css'
import { useNavigate } from "react-router-dom";



const items: TabsProps['items'] = [
  {
    key: '1',
    label: '首页',
  },
  {
    key: '2',
    label: '用户管理',
  },
];

const NavBar: React.FC = () =>{
  const navigate = useNavigate()
  const onChange = (key: string) => {
    navigate('/login')
  };
  return (
    <Flex justify='space-between' style={{height:'100%'}}>
      <Flex>
        <img className="logo" src={logo}></img>
        <Tabs className="tabs" defaultActiveKey="1" items={items} onChange={onChange} />
      </Flex>
      <div>
        <Button className="loginOrRegister">登录/注册</Button>
      </div>
    </Flex>
  )
}

export default NavBar